{% extends '../_manage.html' %}

{% block title %} {{ _('All Headlines') }} {% endblock %}

{% block head %}
<script>
    $(function () {
    	let published = '{{ published }}' === 'true';
        getJSON('/api/headlines', { published: published, page: '{{ page }}' }, function (err, resp) {
            if (err) {
                return showError(err);
            }
            let
            		page = resp.page,
            		headlines = resp.results,
            		userIds = headlines.map(h => h.userId).filter(function (element, index, self) {
    				return self.indexOf(element) === index;
				});
            getJSON('/api/users/ids?' + userIds.map(id=>'id='+id).join('&'), function (err, resp) {
                	if (err) {
                		return showError(err);
                	}
	            headlines.map(h => {
	            		h.user = resp[h.userId];
			    });
                	initVM({
                		published: published,
                		page: page,
                    headlines: headlines
                	});
            });
        });
    });

    function initVM(data) {
        var vm = new Vue({
            el: '#vm',
            data: {
            		published: data.published,
            		page: data.page,
                headlines: data.headlines
            },
            created: function () {
                $('#loading').hide();
                $('#vm').show();
            },
            methods: {
                editHeadline: function (id) {
                		location.assign('/manage/headline/headline_update?id='+id);
                },
                publishHeadline: function (id) {
                    var that = this;
                    var a = that.headlines.find(a => a.id === id);
                    UIkit.modal.confirm('Headline \"' + a.name + '\" will be published. Continue?', function () {
                        that.$resource('/api/headlines/' + a.id + '/publish').save({}).then(function (resp) {
                            resp.json().then(function (result) {
                                refresh();
                            });
                        }, onJsonError);
                    });
                },
                deleteHeadline: function (id) {
                    var that = this;
                    var a = that.headlines.find(a => a.id === id);
                    UIkit.modal.confirm('Headline \"' + a.name + '\" will be deleted. Continue?', function () {
                        that.$resource('/api/headlines/' + a.id + '/delete').save({}).then(function (resp) {
                            resp.json().then(function (result) {
                                refresh();
                            });
                        }, onJsonError);
                    });
                },
            }
        });
    }
</script>
{% endblock %}

{% block main %}

<div id="loading" class="uk-width-1-1">
    <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
</div>

<div id="error" class="uk-width-1-1">
</div>

<div id="vm" class="uk-width-1-1">
    <ul data-uk-tab class="uk-tab">
        <li v-bind:class="{'uk-active':!published}"><a onclick="location.assign('?published=false')">{{ _('Unpublished Headlines') }}</a></li>
        <li v-bind:class="{'uk-active':published}"><a onclick="location.assign('?published=true')">{{ _('Published Headlines') }}</a></li>
    </ul>
    <div class="uk-margin">
        <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
    </div>

    <table class="uk-table uk-table-hover">
        <thead>
            <tr>
                <th width="60%">{{ _('Name') }} / {{ _('Description') }}</th>
                <th width="15%">{{ _('Creator') }}</th>
                <th width="15%">{% if published %} {{ _('Publish At') }} {% else %} {{ _('Created At') }} {% endif %}</th>
                <th width="10%">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="h in headlines">
                <td>
                    <h3><a v-text="h.name" :href="h.url" target="_blank"></a></h3>
                    <p><a v-text="h.url" :href="h.url" target="_blank"></a></p>
                    <p v-text="h.description"></p>
                </td>
                <td>
                    <p><i class="uk-icon-user"></i> <a :href="'/user/' + h.userId" v-text="h.user.name" target="_blank"></a></p>
                </td>
                <td>
                    <span v-show="published" v-text="h.publishAt.toDateTime()"></span>
                    <span v-show="!published" v-text="h.createdAt.toDateTime()"></span>
                </td>
                <td>
                    <a v-on:click="editHeadline(h.id)" title="Edit Headline" href="#0" class="x-btn"><i class="uk-icon-edit"></i></a>
                    <a v-show="!published" v-on:click="publishHeadline(h.id)" title="Publish Headline" href="#0" class="x-btn"><i class="uk-icon-check"></i></a>
                    <a v-on:click="deleteHeadline(h.id)" title="Delete Headline" href="#0" class="x-btn"><i class="uk-icon-trash"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    <div is="pagination" v-bind:page="page"></div>

</div>

{% endblock %}